<template>
  <div class="albumDetails">
    <el-row>
      <el-col :span="18" class="albumImgInfo" v-if="albumInfo">
        <table cellpadding="0" cellspacing="0" class="albumInfo">
          <tr>
            <td class="albumImg"><img :src="albumInfo.album.picUrl" :alt="albumInfo.album.name"></td>
            <td>
              <ul class="albumTxtInfo">
                <li class="albumTitle">
                  <div class="albumName"><b>{{albumInfo.album.name}}</b></div>
                  <span class="albumAlias" v-if="albumInfo != null">{{albumInfo.album.alias[0]}}</span>
                </li>
                <li class="publishTime">歌手：<span class="albumSonger">{{albumInfo.album.artist.name}}</span></li>
                <li class="publishTime">发行时间：{{formatDate(albumInfo.album.publishTime)}}</li>
                <li class="publishTime">发行公司：{{albumInfo.album.company}}</li>
              </ul>
              <ul class="operation">
                <li>
                  <el-button type="primary" plain v-if="!isCollect" @click="collectAlbum(albumInfo.album.id)"><i class="el-icon-folder-add"></i>&nbsp;收藏</el-button>
                  <el-button type="primary" plain v-if="isCollect" @click="collectAlbum(albumInfo.album.id)">取消收藏</el-button>
                </li>
                <li>
                  <el-button type="primary" plain><i class="el-icon-chat-dot-square"></i>（{{albumInfo.album.info.commentCount}}）</el-button>
                </li>
              </ul>
            </td>
          </tr>
        </table>

        <h5>专辑介绍：</h5>
        <p class="albumIntroduce">{{albumInfo.album.description}}</p>

        <table cellpadding="0" cellspacing="0" class="albumInfo">
          <tr>
            <td class="songTableTitle">包含歌曲列表</td>
            <td class="songCount">{{albumInfo.songs.length}}首歌</td>
          </tr>
        </table>

        <table cellpadding="0" cellspacing="0" class="songList" style="table-layout: fixed;">
          <tr class="songListTh">
            <td colspan="2"></td>
            <td class="name">标题</td>
            <td class="songTime">时长</td>
            <td class="songer">歌手</td>
          <tr>
          <tr v-for="(item,i) in albumInfo.songs" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
            <td class="ranking">{{i+1}}</td>
            <td class="play">
              <i class="el-icon-video-play" @click="getSongUrl(item.id)"></i>
            </td>
            <td class="name" v-if="item">
              <i class="songName" @click="toSongDetails(item.id)">{{item.name}}</i>&nbsp;
              <i v-if="item.mv != 0" id="mvicon" class="el-icon-video-camera" @click="toMVDetails(item.mv)"></i>
            </td>
            <td class="songTime" v-if="item">{{formatDateTime(item.dt)}}</td>
            <td class="songer" v-if="item" @click="toSongerDetails(item.ar[0].id)">{{item.ar[0].name}}</td>
          </tr>
        </table>

        <div>
          <h2>评论（共{{albumInfo.album.info.commentCount}}条评论）</h2>
          <el-input type="textarea" :rows="4" placeholder="说说你的看法吧" v-model="textarea" resize="none"></el-input>
          <div class="postComments">
            <el-button type="primary" size="mini">发表评论</el-button>
          </div>

          <h3 v-if="hotComments.length != 0">精彩评论</h3>
          <ul class="comments" v-if="hotComments.length != 0">
            <li v-for="(item,i) in hotComments" :key="i">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
                  <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
                </tr>
                <tr>
                  <td class="commentTime">{{formatDate(item.time)}}</td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentInfo">{{item.content}}</td>
                </tr>
                <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
                  <td></td>
                  <td class="commentInfo">
                    <div class="replyComment">
                      <table>
                        <tr>
                          <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                        </tr>
                        <tr>
                          <td class="commentInfo">{{item.beReplied[0].content}}</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentLiked">
                    <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                    <a href="#">回复</a>
                  </td>
                </tr>
              </table>
            </li>
          </ul>

          <h3 v-if="comments.length != 0">最新评论</h3>
          <ul class="comments" v-if="comments.length != 0">
            <li v-for="(item,i) in comments" :key="i">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
                  <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
                </tr>
                <tr>
                  <td class="commentTime">{{formatDate(item.time)}}</td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentInfo">{{item.content}}</td>
                </tr>
                <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
                  <td></td>
                  <td class="commentInfo">
                    <div class="replyComment">
                      <table>
                        <tr>
                          <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                        </tr>
                        <tr>
                          <td class="commentInfo">{{item.beReplied[0].content}}</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td class="commentLiked">
                    <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                    <a href="#">回复</a>
                  </td>
                </tr>
              </table>
            </li>
          </ul>
          <el-pagination v-if="comments.length != 0" :page-size="20" :pager-count="7" layout="prev, pager, next" :total="albumInfo.album.info.commentCount" :current-page="commentPage" @current-change="handleCommentChange">
          </el-pagination>
        </div>
      </el-col>

      <el-col :span="6">
        <table class="otherAlbum" cellpadding="0" cellspacing="0">
          <tr>
            <td><b>Ta的其他热门专辑</b></td>
            <td class="allAlbum" @click="toSongerDetails(albumInfo.album.artist.id)">全部></td>
          </tr>
        </table>

        <table class="otherAlbumList" v-if="otherAlbum != null" cellpadding="0" cellspacing="0">
          <tr v-for="(item,i) in otherAlbum" :key="i">
            <td>
              <div class="hotAlbumImg">
                <img :src="item.picUrl" :alt="item.name" @click="toAlbumDetails(item.id)">
              </div>
            </td>
            <td>
              <ul class="hotAlbumList">
                <li class="hotAlbumName" @click="toAlbumDetails(item.id)">{{item.name}}</li>
                <li class="hotAlbumPublishTime">{{formatDate(item.publishTime)}}</li>
              </ul>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAlbumDetails, getAlbumComment, getSongerAlbum } from "../../../network/home"
import { getSongUrl } from "../../../network/search"
import { getUserCollectAlbum, collectAlbum } from "../../../network/user";

export default {
  name: "AlbumDetails",
  data() {
    return {
      albumInfo: "",
      otherAlbum: [],
      //添加背景样式
      bgcolor: { color1: "white", color2: "grey" },
      textarea: "",
      hotComments: "",
      comments: "",
      commentPage: 1,
      isCollect: "",
    }
  },
  created() {
    this.getAlbumDetails(this.$route.params.id);
    this.getAlbumHotComment(this.$route.params.id, 0);
    this.getAlbumComment(this.$route.params.id, 0);
  },
  methods: {
    getAlbumDetails(id) {
      getAlbumDetails(id).then(res => {
        //console.log(res.data);
        this.albumInfo = res.data;
        this.getSongerAlbum(res.data.album.artist.id, 0);
        this.getUserCollectAlbum(res.data.album.id);
      })
    },
    getAlbumHotComment(id, offset) {
      getAlbumComment(id, offset).then(res => {
        //console.log(res.data);
        this.hotComments = res.data.hotComments;
      })
    },
    getAlbumComment(id, offset) {
      getAlbumComment(id, offset).then(res => {
        this.comments = res.data.comments
      })
    },
    getSongerAlbum(id, offset) {
      getSongerAlbum(id, offset).then(res => {
        //console.log(res.data);
        this.otherAlbum = res.data.hotAlbums.slice(0, 6);
      })
    },
    getSongUrl(id) {
      getSongUrl(id).then(res => {
        localStorage.setItem("songUrl", res.data.data[0].url);
        //刷新页面 input传入过去 其中内容改了 但是页面还是原来的 需要刷新显示
        location.reload()
      })
    },
    getUserCollectAlbum(albumId) {
      getUserCollectAlbum(localStorage.getItem("username"), albumId).then(res => {
        //console.log(res.data);
        this.isCollect = res.data;
      })
    },
    collectAlbum(albumId) {
      collectAlbum(localStorage.getItem("username"), albumId).then(res => {
        this.isCollect = res.data;
      })
    },
    //跳转到播放mv界面
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
    toAlbumDetails(id) {
      this.$router.push({ name: "AlbumDetails", params: { id: id } });
      location.reload();
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
    },
    toSongDetails(id) {
      this.$router.push({ name: "SongDetails", params: { id: id } });
    },
    handleCommentChange(val) {
      this.commentPage = val;
      this.getAlbumComment(this.$route.params.id, (val - 1) * 20);
    },
    formatDateTime(mss) {
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        if (seconds < 10) {
          return "0" + minutes + ":0" + seconds;
        } else {
          return "0" + minutes + ":" + seconds;
        }
      } else {
        if (seconds < 10) {
          return minutes + ":0" + seconds;
        } else {
          return minutes + ":" + seconds;
        }
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();// 年
      let MM = date.getMonth() + 1;// 月
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();// 日
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + MM + '-' + d;
    },
    formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + '';
      } else
        if (num > 1 && num < 10000) {
          return num + '';
        } else {
          return (num / 10000).toFixed(1) + '万';
        }
    },
  }
}
</script>

<style scoped>
.albumDetails {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  border-left: RGB(211, 211, 211) 1px solid;
  border-right: RGB(211, 211, 211) 1px solid;
}
.albumImgInfo {
  border-right: RGB(211, 211, 211) 1px solid;
  padding: 0 30px;
}
.albumInfo {
  width: 100%;
  height: 100%;
  margin-top: 1.5rem;
}
.albumImg {
  width: 200px;
  height: 200px;
}
.albumImg img {
  width: 100%;
  height: 100%;
}
.albumTxtInfo {
  list-style-type: none;
}
.albumTitle {
  margin-bottom: 0.8rem;
}
.albumName {
  font-size: 1.5rem;
}
.albumAlias {
  color: RGB(153, 153, 153);
}
.albumSonger {
  color: RGB(64, 158, 255);
}
.albumSonger:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.publishTime {
  font-size: 0.8rem;
  color: RGB(102, 102, 102);
}
.operation {
  list-style-type: none;
}
.operation li {
  float: left;
  margin-right: 5px;
}
.albumIntroduce {
  white-space: pre-line;
  text-indent: 2em;
  font-size: 0.7rem;
  color: RGB(153, 153, 153);
}
.songList {
  width: 100%;
  height: 100%;
  margin-top: 0.8rem;
  margin-bottom: 1.5rem;
}
.songTableTitle {
  font-size: 1.75rem;
  width: 27%;
}
.songCount {
  color: RGB(102, 102, 102);
}
.songListTh td {
  padding: 5px;
}
.ranking {
  text-align: center;
  line-height: 60px;
  width: 8%;
}
.play {
  width: 2%;
}
.name {
  padding: 10px;
  width: 55%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.songName {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.songTime {
  width: 18%;
  padding: 10px;
}
.songer {
  padding: 10px;
  width: 15%;
}
.otherAlbum {
  width: 80%;
  height: 100%;
  border-bottom: 1px solid RGB(211, 211, 211);
  margin: 10px auto;
  font-size: 0.8rem;
}
.otherAlbum tr td {
  padding-bottom: 5px;
}
.allAlbum {
  float: right;
}
.otherAlbumList {
  margin-left: 10%;
}
.hotAlbumImg {
  width: 50px;
  height: 50px;
}
.hotAlbumImg img {
  width: 100%;
  height: 100%;
}
.hotAlbumList {
  list-style-type: none;
  margin-left: -10%;
}
.hotAlbumList li {
  width: 65%;
}
.hotAlbumName {
  font-size: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hotAlbumPublishTime {
  color: RGB(153, 153, 153);
  font-size: 0.8rem;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  background-color: #f9fafc;
}
.whtie {
  background: RGB(255, 255, 255);
}
.grey {
  background: RGB(250, 250, 250);
}
.el-pagination {
  margin: 0 0 2% 25%;
}
.postComments {
  text-align: right;
  margin-top: 5px;
}
.comments {
  list-style-type: none;
}
.comments li {
  margin-left: -3.2%;
  border-top: RGB(204, 204, 204) 1px solid;
  padding: 20px;
}
.userImg {
  width: 6%;
}
.userImg img {
  width: 100%;
  height: 100%;
}
.userName {
  padding-left: 20px;
  color: RGB(64, 158, 255);
}
.userName:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.commentTime {
  padding-left: 20px;
  color: RGB(153, 153, 153);
}
.commentInfo {
  padding-left: 20px;
}
.replyComment {
  border: solid 1px RGB(222, 222, 222);
  background: RGB(242, 242, 242);
}
.commentLiked {
  text-align: right;
}
.commentLiked a {
  text-decoration: none;
  color: black;
}
.commentLiked a:hover {
  color: RGB(64, 158, 255);
}
</style>